<template>
	<uni-popup ref="popup" type="center">
	<view class="select-poster">
		<view class="select-poster-swiper">
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :duration="1000" :current="current"
				@change="onChange">
				<swiper-item class="swiper-item" v-for="item,index in completePosterList" :key="index">
					<view class="poster-wrapper" :class="{'current':current===index}">
						<image :src="item" class="poster"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="close-btn" @click="close">
			<i class="iconfont icon-close icon"/>
		</view>
		<view class="btn-wrapper">
			<g-button btn_text="保存图片" :width="574" :height="100" @click="savePoster"></g-button>
		</view>
	</view>
	</uni-popup>
</template>

<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>


<script lang="ts" setup>
	import { Ref, ref, defineProps,defineExpose } from 'vue';
	
	const popup : Ref<any> = ref(null);
	
	const current : Ref<number> = ref(0);
	const props = defineProps({
		completePosterList:{
			type:Array,
		}
	});
	console.log(props.completePosterList)
	const onChange = (e) => {
		console.log('onChange', e.detail.current)
		current.value = e.detail.current;
	}
	
	const open = ()=>{
		popup.value.open();
	}
	
	const close = ()=>{
		popup.value.close();
	}
	
	const savePoster = ()=>{
		// console.log(current.value)
		// #ifdef H5
		const aEle = document.createElement('a');
		aEle.download = 'qrcodePoster'; 
		aEle.href =(props.completePosterList![current.value] as string);
		document.body.appendChild(aEle);
		aEle.click();
		aEle.remove(); 
		// #endif
		
		// #ifdef MP-WEIXIN
		uni.saveImageToPhotosAlbum({
			filePath:(props.completePosterList![current.value] as string),
			success: () => {
				uni.prompt.$showToast('保存成功')
			}
		})
		// #endif
	}
	
	defineExpose({
		open
	})
</script>

<style scoped lang="scss">
	@import "./selectPoster.scss";
</style>